<template>
  <div id="information" >
    <template>
      <template  style="margin-top: 15px;width: 30%">
        <el-input placeholder="标题" @keyup.native.enter="find(title)" v-model="title" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="find(title)"></el-button>
        </el-input>
      </template>
    <div style="margin-top: 30px">
      <el-button @click="addInformation()">创建</el-button>
      <el-button @click="deleteList()">删除</el-button>
    </div>

    <el-table
            ref="multipleTable"
            :data="InformationSimpleVO"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleCurrentChange">

    <el-table-column
            type="selection"
            width="55">
    </el-table-column>
      <el-table-column
              label="编号"
              width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
    <el-table-column
            prop="title"
            label="标题"
            width="600">
    </el-table-column>
    <el-table-column
            prop="img"
            label="图片"
            width="200"
            show-overflow-tooltip>

      <template slot-scope="scope">
        <!--scope.row代表当前遍历的数组中的对象-->
        <el-image
                style="width: 100px; height: 100px"
                :src="'http://176.17.10.223:18082/' + scope.row.img"
        ></el-image>
      </template>

    </el-table-column>
    <el-table-column
            label="操作"
            show-overflow-tooltip>
      <template slot-scope="scope">
      <el-button type="success" icon="el-icon-message" round="" @click="selectById(scope.row)">详情</el-button>
      <el-button type="primary" icon="el-icon-edit" round="" @click="updateInformation(scope.row)">修改</el-button>

      <template>
        <el-popconfirm
                title="这是一段内容确定删除吗？"
                @confirm="deleteInformation(scope.$index, scope.row)"
        >
          <el-button  slot="reference" type="danger" plain icon="el-icon-delete" round="">删除</el-button>
        </el-popconfirm>
      </template>
      </template>


    </el-table-column>
  </el-table>
    </template>
  </div>
</template>

<style>

  .el-table .el-table__cell {
    text-align: center;
  }
</style>
<script>
  export default {

    data() {
      return {
        id:'',
        title:'',
        InformationSimpleVO: [],


        MultiSelect:[]
      }
    },

    created() {
      this.getData();
    },

    methods: {

      //
      getData(){
        //发请求获取所有分类信息
        this.axios.get("http://176.17.10.223:18082/information/select-List").then( (response)=> {
          console.log("=========="+ response.data.data)
          this.InformationSimpleVO = response.data.data;
        })
      },

      //创建按钮
      addInformation(){
        console.log("addInformation")
          this.$router.push({path: '/admin/manage/informationAdd'});   //页面路由刷新
      },



      // 删除选中的数据
      deleteInformation(index,row){
        let url = 'http://176.17.10.223:18082/information/deleteById';
        let data = 'id='+ row.id;
        console.log(row.id)
        console.log("请求路径: " + url);
        console.log("请求数据: " + data);
        this.axios.post(url,data).then((response) => {
          /*
          实现局部刷新
           */
          this.InformationSimpleVO.splice(index,1);

          this.$message({
            message: '删除成功',
            type: 'success'
          });
        })
                .catch(function (error) {
                  console.log(error);
                });
      },

      //咨询管理页面 点击详情对应功能
      selectById(row) {

        console.log("InformationShow")
        this.$router.push({path: '/admin/manage/informationShow', query: {id: row.id}})

      },

      updateInformation(row){
        console.log("InformationUpdate")
        this.$router.push({path: '/admin/manage/informationUpdate', query: {id: row.id}})
      },

      // 记录选择的数据
      handleCurrentChange(vals) {
        this.MultiSelect = vals;
      },

      //删除多选/选中的内容

      deleteList(){
        console.log("deleteList")
        let vals = this.MultiSelect;
        console.log(vals)
        vals.forEach(val => {
          console.log("val.id=============="+ val.id)
          this.deleteInformation(null,val)
        })
        // 重置选中
        this.MultiSelect = null;
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
        //当点击删除图片时方法会执行
        //file代表要删除的文件
        //file.response代表文件上传成功时 服务器响应的数据(文件名)
        console.log("文件名="+file.response);
        //http://176.17.10.223:8080/remove?name=xxx.jpg
        let url = "http://176.17.10.223:18082/information/remove"
        let data = 'name=' + file.response;
        this.axios.post(url,data).then((response) => {
          console.log("服务器图片已经删除")
        })
      },

      // 查找单个用户
      find(title){
        console.log("find===============");
        if (title != ''){
          let url = 'http://176.17.10.223:18082/information/selectByTitle';
          let data = 'title='+ title;
          console.log(title);
          this.axios.post(url,data).then( (response)=> {
            // 如果查询到的不是空数据
            if (response.data.data != null){
              // 先清空用户数组
              this.InformationSimpleVO=[];
              // 清空搜索的用户
              this.title = '';
              this.InformationSimpleVO[0] = response.data.data;
            }else {
              this.$message({
                message: '该标题不存在',
                type: 'error'
              });
            }
          })
        }else {
          // 当搜索的用户是空的时候  需要再执行一次方法拿到数据
          this.getData();
        }
      },
    }
  }
</script>
